import React, { Component } from 'react';
import { Scroller, Touchable, Rating, Switch } from '$yo-component';
import Header from '$component/header/index.js';
import { Router, Route, Link } from 'yo-router'
import yoHistory from '$common/history';
import './index.scss';


class HomePage extends Component {

    render() {
        return (
            <div className="yo-flex">
                <Header title="个人主页" />
                <Scroller extraClass="flex" className="yo-flex" onScroll={() => {
                }}>

                    <ul class="yo-list" className="minemyul">
                        <li className="name">
                            <div className="nameimg">
                                <img className="nameingsize" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510400752042&di=8bd90770a7ae89f96c92e793dc3cebfa&imgtype=0&src=http%3A%2F%2Fp2.so.qhimgs1.com%2Ft01238b1ce636c6d012.jpg" />
                            </div>
                            <div className='nameinfo'>
                                <h4>rh</h4>
                                <p className="pname">码云:921401845@qq.com</p>
                            </div>
                            <div className="linkmayun">
                                <img className="linkmayunsize" src="https://gitee.com/logo.svg?20171024" />
                            </div>
                        </li>
                        <li class="label" className="labelColor"></li>
                        <li class="item" className="itemContent">
                            <div>相册</div></li>
                        <li class="item" className="itemContent">
                            <div>历程</div></li>
                        <li class="item" className="itemoon">
                            <div className="moon">
                                <div className="moonleft">心情
                                </div>
                                <div className="moonright">
                                <div className="floatright">
                                    <Rating
                                        value={3}
                                        onChange={value => this.setState({ value: value })}
                                    />
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="label" className="labelColor"></li>
                        <li class="item" className="itemContent">
                            <div>项目</div></li>
                        <li class="item" className="itemContent">
                            <div>技能</div></li>
                        <li class="label" className="labelColor"></li>
                        <li class="item" className="itemContent">
                            <div>设置</div></li>
                        <li class="item" className="itemoon">
                            <div className="moon">
                                <div className="moonleft">录音
                                </div>
                                <div className="moonright">
                                    <div className="floatright">
                                    <Switch
                                        checked={true}
                                        onChange={(value) => { this.getValue('switch1', value); }}
                                    />
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="label" className="AllColor"></li>
                    </ul>
                </Scroller>
                <ul className="yo-tab yo-tab-view">
                    <li className="item item-y-ico">
                        <Touchable
                            touchClass="touchable-highlight"
                            onTap={() => {
                                yoHistory.push('/');
                            }}
                        >
                            <div className='tabitem'>
                                首页
          </div>
                        </Touchable>
                    </li>
                    <li className="item item-y-ico">
                        <Touchable
                            touchClass="touchable-highlight"
                            onTap={() => {
                                yoHistory.push('/skill');
                            }}
                        >
                            <div className='tabitem'>
                                技能
    </div>
                        </Touchable>
                    </li>
                    <li className="item item-y-ico">
                        <Touchable
                            touchClass="touchable-highlight"
                            onTap={() => {
                                yoHistory.push('/project');
                            }}
                        >
                            <div className='tabitem'>
                                项目
    </div>
                        </Touchable>
                    </li>
                    <li className="item item-y-ico  item-on">
                        <Touchable
                            touchClass="touchable-highlight"
                            onTap={() => {
                                yoHistory.push('/minemy');
                            }}
                        >
                            <div className='tabitem'>
                                首页
    </div>
                        </Touchable>
                    </li>
                </ul>
            </div>
        )
    }
}

export default HomePage;
